<template>
  <div>
    <Dialog
      ref="Drawer"
      @close="close"
      :loading="loading"
      @handleSave="handleSave"
      title="分配菜单"
      :dialog="dialog"
    >
      <template #content>
        <el-tabs
          v-model="tabKey"
          v-if="userInfo.type != 'admin'"
          @tab-click="handleChangeTab"
          class="tabs-content"
        >
          <el-tab-pane
            label="医院端"
            name="hospital"
          >
            <el-tree
              ref="hospital"
              show-checkbox
              :data="menuList"
              :props="defaultProps"
              node-key="id"
              :default-expand-all="true"
              :expand-on-click-node="false"
              highlight-current
            >
            </el-tree>
          </el-tab-pane>
          <el-tab-pane
            label="APP端"
            name="staff"
          >
            <el-tree
              ref="staff"
              show-checkbox
              :data="menuList1"
              :props="defaultProps"
              node-key="id"
              :default-expand-all="true"
              :expand-on-click-node="false"
              highlight-current
            >
            </el-tree>
          </el-tab-pane>
        </el-tabs>
        <el-tree
          v-else
          ref="role_tree"
          show-checkbox
          :data="menuList"
          :props="defaultProps"
          node-key="id"
          :default-expand-all="true"
          :expand-on-click-node="false"
          highlight-current
        >
        </el-tree>
      </template>
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog";
import * as settingApi from "@/api/setting1";
import * as Utils from "@/utils";
import { getUserInfo } from "@/utils/auth";
export default {
  components: {
    Dialog,
  },
  data() {
    return {
      dialog: false, //弹框

      ruleForm: {
        //表单提交
        menuIds: [],
        roleId: "",
      },
      formLabelWidth: "100px", //表单label宽度
      loading: false, //表单提交按钮
      defaultProps: {
        children: "children",
        label: "name",
      },
      menuList: [],
      menuList1: [],
      tabKey: "hospital",
      tabList: [
        {
          name: "医院端",
          value: "hospital",
        },
        {
          name: "APP端",
          value: "staff",
        },
      ], //
      userInfo: {},
      dataInfo: {},
    };
  },
  methods: {
    //弹框关闭
    close() {
      this.dialog = false;
    },
    //获取菜单列表
    async handleGetMenus(_menus) {
      let data = {
        isPage: false,
        sysFlag: this.userInfo.type == "admin" ? "admin" : this.tabKey,
      };
      if (this.userInfo.type != "admin") {
        let menu = await settingApi.menusList({
          isPage: false,
          sysFlag: "hospital",
        });
        if (menu && menu.success) {
          this.menuList = Utils.treeDataTranslate(menu.data);
          if (_menus && _menus.length != 0) {
            this.setCheckedKeys(_menus);
          }
        }
        let menu1 = await settingApi.menusList({
          isPage: false,
          sysFlag: "staff",
        });
        if (menu1 && menu1.success) {
          this.menuList1 = Utils.treeDataTranslate(menu1.data);
          if (_menus && _menus.length != 0) {
            this.setCheckedKeys(_menus);
          }
        }
      } else {
        settingApi.menusList(data).then((res) => {
          if (res && res.success) {
            this.menuList = Utils.treeDataTranslate(res.data);
            if (_menus && _menus.length != 0) {
              this.setCheckedKeys(_menus);
            }
          }
        });
      }
    },
    handleChangeTab(row) {
      this.tabKey = row.name;
      // this.handleGetRoleMenus(this.ruleForm.roleId);
    },
    //设置选中树  menuIds :后台返回的treeNode
    setCheckedKeys(menuIds) {
      var menuArr = [];
      let isAdmin = this.userInfo.type == "admin";
      for (let j = 0; j < menuIds.length; j++) {
        const menuid = menuIds[j];
        if (isAdmin) {
          //监管端
          let key = this.getNodekeys(menuid, this.menuList);
          if (key != "") {
            menuArr.push(key);
          }
          this.$refs["role_tree"].setCheckedKeys(menuArr);
        } else {
          //
          let key = this.getNodekeys(menuid, this.menuList);
          if (key != "") {
            menuArr.push(key);
          }
          this.$refs["hospital"].setCheckedKeys(menuArr);

          let key1 = this.getNodekeys(menuid, this.menuList1);
          if (key1 != "") {
            menuArr.push(key1);
            this.$refs["staff"].setCheckedKeys(menuArr);
          }
        }
      }
    },
    //获取选中的孩子节点
    getNodekeys(menuId, childrens) {
      var key = "";
      for (let i = 0; i < childrens.length; i++) {
        const menu = childrens[i];
        let id = menu.id;
        let childs = menu.children;
        if (id == menuId) {
          //如果相等
          if (childs && childs.length > 0) {
            key = this.getNodekeys(menuId, childs);
          } else {
            //没有孩子节点
            return menuId;
          }
        } else if (childs && childs.length > 0) {
          key = this.getNodekeys(menuId, childs);
        }
        if (key != "") {
          return key;
        }
      }
      return key;
    },
    //获取角色列表菜单权限
    handleGetRoleMenus(id) {
      settingApi.getListByRoleId(id).then((res) => {
        if (res && res.success) {
          let menus = [];
          if (res.data) {
            menus = res.data.map((item) => {
              return item.id;
            });
          }
          this.handleGetMenus(menus);
        }
      });
    },
    //初始化弹框
    showModal(_row) {
      this.dialog = true;
      this.ruleForm.roleId = _row.id;
      this.ruleForm.menuIds = _row.menuVoList || [];
      this.dataInfo = _row;
      this.tabKey = "hospital";
      this.userInfo = getUserInfo() ? JSON.parse(getUserInfo()) : {};
      this.$nextTick((_) => {
        let isAdmin = this.userInfo.type == "admin";
        if (isAdmin) {
          this.$nextTick(() => {
            this.$refs["role_tree"].setCheckedKeys([]);
          });
        } else {
          this.$nextTick(() => {
            this.$refs["hospital"].setCheckedKeys([]);
            this.$refs["staff"].setCheckedKeys([]);
          });
        }

        this.handleGetRoleMenus(_row.id);
      });
    },
    //提交保存
    handleSave() {
      this.loading = true;
      let isAdmin = this.userInfo.type == "admin";
      let arr = [];
      if (isAdmin) {
        arr = this.$refs["role_tree"]
          .getCheckedKeys()
          .concat(this.$refs["role_tree"].getHalfCheckedKeys());
      } else {
        let hospital = this.$refs["hospital"]
          .getCheckedKeys()
          .concat(this.$refs["hospital"].getHalfCheckedKeys());
        let staff = this.$refs["staff"]
          .getCheckedKeys()
          .concat(this.$refs["staff"].getHalfCheckedKeys());
        arr = [...hospital, ...staff];
      }

      this.ruleForm.menuIds = arr;
      settingApi
        .concatMenu(this.ruleForm)
        .then((res) => {
          if (res && res.success) {
            this.loading = false;
            this.dialog = false;
            this.$emit("getDataList");
          } else {
            this.loading = false;
          }
        })
        .catch((e) => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  max-height: 560px;
  overflow: auto;
}
::v-deep .el-tabs__content {
  max-height: 560px;
  overflow: auto;
}
</style>